<!DOCTYPE html>
<html lang="zh-CN"xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>员工列表</title>
    <link href="../static/dist/css/bootstrap.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="../static/css/emp.css"/>
  </head>
  <body>
	
	<div class="container">
		<h1 class="text-center">员工列表</h1>
		
		<table class="table">
			<thead>
				<tr>
					<th>员工ID</th>
					<th>姓名</th>
					<th>部门</th>
					<th>性别</th>
					<th>邮箱</th>
					<th>手机号</th>
					<th>入职时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody" >
				<tr th:each="emp:${emps}">
					<td th:text="${emp.empId}"></td>
					<td th:text="${emp.empName}"></td>
					<td th:text="${emp.department.deptName}"></td>
					<td th:text="${emp.gender==0?'女':'男'}"></td>
					<td th:text="${emp.email}"></td>
					<td th:text="${emp.getPhone()}"></td>
					<td th:text="${#dates.format(emp.hireDate,'yyyy-MM-dd HH:mm:ss')}"></td>

					<td>
						<a class="btn btn-danger" onclick="if(confirm('是否删除?')){return true;}else{return false;}" th:href="@{/deleteEmpolyee/}+${emp.empId}">&nbsp;删除 </a>
						<a class="btn btn-info" th:href="@{/employee_update/}+${emp.empId}">&nbsp;&nbsp;更新</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="row">
			<div class="col-lg-9">
				<a class="btn btn-primary" th:href="@{/employee_add
				}">添加员工</a> &nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="#">Excel导出</a>
			</div>
			<div class="col-lg-3">
				<ul id="page">
					<li>
						<a href="#" id="pre">上一页</a>
					</li>
					<li>
						<span id="showId">1/10</span>
					</li>
					<li>
						<a href="#" id="next">下一页</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script th:src="@{static/js/jquery.js}"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script th:src="@{static/dist/js/bootstrap.js}"></script>
	<script type="text/javascript">

		//获取分页数据
		var hasNext=true;
		var hasPre=true;
		var pageCount=0;
		var pageNo=1;
		var pageSize=3;
		$.getJSON("getEmployeePage",{pageNo:pageNo,pageSize:pageSize},function (data) {
			//console.log(data);
			hasNext=data.hasnext;
			hasPre=data.hasPre;
			pageCount=data.pageCount;
			pageNo=data.pageNo;

			var result=data.page;
			var str="";
			for (var i=0;i<result.length;i++){
                str+="<tr>\n" +
                    "<td>"+result[i].empId+"</td>\n" +
                    "<td>"+result[i].empName+"</td>\n" +
                    "<td>"+result[i].department.deptName+"</td>\n" +
                    "<td>"+result[i].gender+"</td>\n" +
                    "<td>"+result[i].email+"</td>\n" +
                    "<td>"+result[i].phone+"</td>\n" +
                    "<td>"+result[i].hireDate+"</td>\n" +
                    "<td>\n" +
                    "<a class=\"btn btn-danger\" onclick=\"if(confirm('是否删除?')){return true;}else{return false;}\" href=\"deleteEmpolyee/"+result[i].empId+"\">&nbsp;删除 </a>\n" +
                    "<a class=\"btn btn-info\"  href=\"employee_update/"+result[i].empId+"\">&nbsp;&nbsp;更新</a>\n" +
                    "</td></tr>"
			}

			//console.log(str);
            //将str注入到tbody标签下
            $("#tbody").html(str);
            //页码展示
            $("#showId").html(pageNo+"/"+pageCount);
        })

		//给上一页/下一页绑定单击事件

		//上一页
		$("#pre").click(function () {
			if (hasPre) {
			    pageNo=pageNo-1;
			    //再次调用后台数据
				$.getJSON("getEmployeePage",{pageNo:pageNo,pageSize:pageSize},function (data) {
					console.log(data);
					hasNext=data.hasnext;//是否有下一页
					hasPre=data.hasPre;//上一页
					pageCount=data.pageCount;//总页数
					pageNo=data.pageNo;//当前页

					var result=data.page;//获得页面数据
					var  str="";
                    for (var i=0;i<result.length;i++){
                        str+="<tr>\n" +
                            "<td>"+result[i].empId+"</td>\n" +
                            "<td>"+result[i].empName+"</td>\n" +
                            "<td>"+result[i].department.deptName+"</td>\n" +
                            "<td>"+result[i].gender+"</td>\n" +
                            "<td>"+result[i].email+"</td>\n" +
                            "<td>"+result[i].phone+"</td>\n" +
                            "<td>"+result[i].hireDate+"</td>\n" +
                            "<td>\n" +
                            "<a class=\"btn btn-danger\" onclick=\"if(confirm('是否删除?')){return true;}else{return false;}\" href=\"deleteEmpolyee/"+result[i].empId+"\">&nbsp;删除 </a>\n" +
                            "<a class=\"btn btn-info\"  href=\"employee_update/"+result[i].empId+"\">&nbsp;&nbsp;更新</a>\n" +
                            "</td></tr>"
                    }
                    console.log(str);
                    //将str放置到tbody里面
					$("#tbody").html(str);

					//将页面信息放到showId
					$("#showId").html(pageNo+"/"+pageCount);
                })
			}else
			    alert("已经是第一页")
        });

		//下一页
		$("#next").click(function () {

			if (hasNext){
			    pageNo=pageNo+1;
				$.getJSON("getEmployeePage",{pageNo:pageNo,pageSize:pageSize},function (data) {
					console.log(data);
					hasNext=data.hasnext;
					hasPre=data.hasPre;
					pageNo=data.pageNo;
					pageCount=data.pageCount;

					//获取页面员工数据
					var result=data.page;
					var str="";
					for (var i=0;i<result.length;i++){
                        str+="<tr>\n" +
                            "<td>"+result[i].empId+"</td>\n" +
                            "<td>"+result[i].empName+"</td>\n" +
                            "<td>"+result[i].department.deptName+"</td>\n" +
                            "<td>"+result[i].gender+"</td>\n" +
                            "<td>"+result[i].email+"</td>\n" +
                            "<td>"+result[i].phone+"</td>\n" +
                            "<td>"+result[i].hireDate+"</td>\n" +
                            "<td>\n" +
                            "<a class=\"btn btn-danger\" onclick=\"if(confirm('是否删除?')){return true;}else{return false;}\" href=\"deleteEmpolyee/"+result[i].empId+"\">&nbsp;删除 </a>\n" +
                            "<a class=\"btn btn-info\"  href=\"employee_update/"+result[i].empId+"\">&nbsp;&nbsp;更新</a>\n" +
                            "</td></tr>"
					}
                    console.log(str);
                    //将str放置到tbody里面
                    $("#tbody").html(str);

                    //将页面信息放到showId
                    $("#showId").html(pageNo+"/"+pageCount);
                })
			} else

			    alert("已经是最后一页")
        })

	</script>
  </body>
</html>